<style lang="less">
  .organization_profit_summary{
    .statistics{
      display: inline-block;
      white-space: nowrap;
      padding: 2px 5px;
      height: 28px;
      line-height: 28px;
      span{
        color: orange;
      }
    }
  }
</style>

<template>
  <div class="organization_profit_summary">
    <!--<el-tabs v-model="activeName">-->
      <!--<el-tab-pane label="零担收益统计" name="first">-->
        <!--工具条-->
        <ue-search-bar ref="ueSearchBar" v-model="searchFilters" :data="querys">
        </ue-search-bar>

        <!-- 操作 -->
        <el-col :span="24" style="margin-bottom: 10px">
          <el-button type="primary" @click="exportExcel">导出</el-button>
          <el-button type="primary" @click="resetCondition" style="float: right">重置</el-button>
          <el-button type="primary" v-on:click="search" style="float: right">查询</el-button>
        </el-col>

        <!--列表-->
        <el-table :data="tableData" highlight-current-row border max-height="680"
                   v-loading="listLoading" style="width: 100%;">
          <el-table-column type="index" width="55">
          </el-table-column>
          <el-table-column prop="organizationName" label="网点名称" width="160">
          </el-table-column>
          <el-table-column prop="countyName" label="管辖区域" width="220">
          </el-table-column>
          <el-table-column prop="orderTotalNum" label="总订单数(票)" width="170">
          </el-table-column>
          <el-table-column prop="orderTotalPrice" label="订单总额(元)" width="160">
          </el-table-column>
          <el-table-column prop="profitTotalAmount" label="收益总额(元)" width="180">
          </el-table-column>
          <el-table-column prop="chargeOffsTotalAmount" label="已销帐金额(元)" width="180">
          </el-table-column>
          <el-table-column label="剩余金额(元)" width="180">
            <template slot-scope="scope">
              {{scope.row.profitTotalAmount - scope.row.chargeOffsTotalAmount}}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="220">
            <template slot-scope="scope">
              <el-button type="primary" @click="detail(scope.row.organizationId,scope.row.countyId)">收益明细</el-button>
              <el-button type="primary" @click="chargeOffsLogList('EQ_organization.id='+scope.row.organizationId+';EQ_countyId='+scope.row.countyId)">提取记录</el-button>
              <el-button type="primary" @click="chargeOffs(scope.row.organizationId,scope.row.countyId)">销账</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
          <div class="statistics">
            统计：收益总额<span>{{totalAmount}}</span>元，
            已销帐总额<span>{{chargeOffsTotalAmount}}</span>元，
            剩余总额<span>{{totalAmount-chargeOffsTotalAmount}}</span>元
          </div>
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
            layout="total,sizes,prev, pager, next, jumper"
            :total="total" style="float: right">
          </el-pagination>
        </el-col>
      <!--</el-tab-pane>-->
      <!--<el-tab-pane label="整车收益统计" name="second">-->
        <!--&lt;!&ndash;工具条&ndash;&gt;-->
        <!--<search-bar more-display>-->
          <!--<el-row :span="24">-->
            <!--<el-col :span="8">-->
              <!--<el-form-item label="网点名称">-->
                <!--<el-input v-model="truckLoadSearchFilters['LIKE_organization.name']"></el-input>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="8">-->
              <!--<el-form-item label="管辖区域">-->
                <!--<el-input v-model="truckLoadSearchFilters['LIKE_countyName']"></el-input>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
          <!--</el-row>-->
        <!--</search-bar>-->

        <!--&lt;!&ndash; 操作 &ndash;&gt;-->
        <!--<el-col :span="24" style="margin-bottom: 10px">-->
          <!--<el-button type="primary" @click="exportExcel">导出</el-button>-->
          <!--<el-button type="primary" @click="resetCondition" style="float: right">重置</el-button>-->
          <!--<el-button type="primary" v-on:click="search" style="float: right">查询</el-button>-->
        <!--</el-col>-->

        <!--&lt;!&ndash;列表&ndash;&gt;-->
        <!--<el-table :data="truckLoadTableData" highlight-current-row border max-height="680"-->
                  <!--v-loading="truckLoadListLoading" style="width: 100%;">-->
          <!--<el-table-column type="index" width="55">-->
          <!--</el-table-column>-->
          <!--<el-table-column prop="organizationName" label="网点名称" width="160">-->
          <!--</el-table-column>-->
          <!--<el-table-column prop="countyName" label="管辖区域" width="220">-->
          <!--</el-table-column>-->
          <!--<el-table-column prop="orderTotalNum" label="总订单数(票)" width="170">-->
          <!--</el-table-column>-->
          <!--&lt;!&ndash;<el-table-column prop="orderTotalPrice" label="订单总额(元)" width="160">&ndash;&gt;-->
          <!--&lt;!&ndash;</el-table-column>&ndash;&gt;-->
          <!--<el-table-column prop="profitTotalAmount" label="收益总额(元)" width="180">-->
          <!--</el-table-column>-->
          <!--<el-table-column prop="chargeOffsTotalAmount" label="已销帐金额(元)" width="180">-->
          <!--</el-table-column>-->
          <!--<el-table-column label="剩余金额(元)" width="180">-->
            <!--<template slot-scope="scope">-->
              <!--{{scope.row.profitTotalAmount - scope.row.chargeOffsTotalAmount}}-->
            <!--</template>-->
          <!--</el-table-column>-->
          <!--<el-table-column label="操作" min-width="220">-->
            <!--<template slot-scope="scope">-->
              <!--<el-button type="primary" @click="truckLoadDetail(scope.row.organizationId,scope.row.countyId)">收益明细</el-button>-->
              <!--<el-button type="primary" @click="truckLoadChargeOffsLogList('EQ_organization.id='+scope.row.organizationId+';EQ_countyId='+scope.row.countyId)">提取记录</el-button>-->
              <!--<el-button type="primary" @click="chargeOffs(scope.row.organizationId,scope.row.countyId)">销账</el-button>-->
            <!--</template>-->
          <!--</el-table-column>-->
        <!--</el-table>-->

        <!--&lt;!&ndash;工具条&ndash;&gt;-->
        <!--<el-col :span="24" class="toolbar">-->
          <!--<div class="statistics">-->
            <!--统计：收益总额<span>{{truckLoadTotalAmount}}</span>元，-->
            <!--已销帐总额<span>{{truckLoadChargeOffsTotalAmount}}</span>元，-->
            <!--剩余总额<span>{{truckLoadTotalAmount-truckLoadChargeOffsTotalAmount}}</span>元-->
          <!--</div>-->
          <!--<el-pagination-->
            <!--:current-page="truckLoadCurrentPage"-->
            <!--:page-size="truckLoadCurrentPage"-->
            <!--@size-change="handleTruckLoadPageSizeChange"-->
            <!--@current-change="handleTruckLoadCurrentPageChange"-->
            <!--layout="total,sizes,prev, pager, next, jumper"-->
            <!--:total="truckLoadTableTotal" style="float: right">-->
          <!--</el-pagination>-->
        <!--</el-col>-->
      <!--</el-tab-pane>-->
    <!--</el-tabs>-->
    <charge-offs-list ref="chargeOffsList" :load-data="loadChargeOffsLogs" @viewImg="viewImg"></charge-offs-list>
    <charge-offs-list ref="truckLoadChargeOffsLogList" :load-data="loadTruckLoadChargeOffsLogs" @viewImg="viewImg"></charge-offs-list>
    <charge-offs ref="chargeOffs" @comfirmSuccess="chargeOffsComfirmSuccess" @viewImg="viewImg"></charge-offs>
    <view-img ref="viewImg"></view-img>
  </div>
</template>

<script>
import {getAllOrganizationProfitSummaries, getTruckLoadOrganizationProfitSummaryList, getTruckLoadOrganizationProfitSummarystatics} from '../../../api/organization/OrganizationProfitSummary';
import {getAllOrganizationChargeOffsLogs, createOrganizationChargeOffsLog, getAllTruckLoadOrganizationChargeOffsLogs, createTruckLoadOrganizationChargeOffsLog} from '../../../api/organization/OrganizationChargeOffsLog';
import ChargeOffsList from '../ChargeOffsList.vue';
import ChargeOffs from '../ChargeOffs.vue';
import ViewImg from '../ViewImg.vue';
import {resetForm} from '../../../lib/util';
export default {
  components: {
    ViewImg,
    ChargeOffs,
    ChargeOffsList
  },
  data () {
    return {
      truckLoadSearchFilters: {
        'LIKE_organization.name': null,
        'LIKE_countyName': null
      },
      truckLoadListLoading: false,
      truckLoadCurrentPage: 1,
      truckLoadPageSize: 10,
      truckLoadTableTotal: 0,
      truckLoadTableData: [],
      truckLoadTotalAmount: null,
      truckLoadChargeOffsTotalAmount: null,
      activeName: 'first',
      totalAmount: 0,
      chargeOffsTotalAmount: 0,
      searchFilters: {},
      tableData: [],
      listLoading: false,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      loadChargeOffsLogs: getAllOrganizationChargeOffsLogs,
      loadTruckLoadChargeOffsLogs: getAllTruckLoadOrganizationChargeOffsLogs
    };
  },
  methods: {
    chargeOffsComfirmSuccess (extendObj, o) {
      o.countyId = extendObj.countyId;
      if (this.activeName === 'first') {
        createOrganizationChargeOffsLog(extendObj.organizationId, o).then(res => {
          if (res.data.successFlg) {
            this.$message.success('销帐成功！');
            this.$refs.chargeOffs.hide();
            this.search();
          } else {
            this.$message.error(res.data.errorMsg);
          }
        });
      } else if (this.activeName === 'second') {
        createTruckLoadOrganizationChargeOffsLog(extendObj.organizationId, o).then((res) => {
          if (res.data) {
            this.$message.success('销帐成功！');
            this.$refs.chargeOffs.hide();
            this.search();
          }
        });
      }
    },
    detail (organizationId, countyId) {
      this.$router.push({
        path: 'organization_profit_summary_detail/' + organizationId + '/' + countyId, query: {activeName: 'first', title: '网点零担收益明细'}
      });
    },
    truckLoadDetail (organizationId, countyId) {
      this.$router.push({
        path: 'organization_profit_summary_detail/' + organizationId + '/' + countyId, query: {activeName: 'second', title: '网点整车收益明细'}
      });
    },
    chargeOffs (organizationId, countyId) {
      this.$refs.chargeOffs.show({organizationId: organizationId, countyId: countyId});
    },
    viewImg (val) {
      let imgs = [];
      let imgList = val.split(';');
      for (let p in imgList) {
        if (imgList[p] !== '' && p !== 'contains') {
          imgs.push('/upload/' + imgList[p]);
        }
      }
      this.$refs.viewImg.show(imgs);
      // this.$refs.viewImg.show(val.split(';').map(o => '/upload/' + o));
    },
    chargeOffsLogList (filters) {
      this.$refs.chargeOffsList.show(filters, 'order');
    },
    truckLoadChargeOffsLogList (filters) {
      this.$refs.truckLoadChargeOffsLogList.show(filters, 'truckLoadOrder');
    },
    exportExcel () {
      if (this.activeName === 'first') {
        location.href = '/api/v2.0/admin/organization-profit-summaries-export?filters=' + this.$ue.objToFilter(this.searchFilters);
      }
      if (this.activeName === 'second') {
        location.href = '/api/v3.0/admin/api/truck-load-organization-profit-summaries-export?filters=' + this.$ue.objToFilter(this.truckLoadSearchFilters);
      }
    },
    resetCondition () {
      this.$refs.ueSearchBar.reset();
      resetForm(this.$refs.truckLoadSearchFilters, this.truckLoadSearchFilters);
    },
    search () {
      if (this.activeName === 'first') {
        this.listLoading = true;
        getAllOrganizationProfitSummaries({
          filters: this.$ue.objToFilter(this.searchFilters),
          sorts: '',
          page: this.currentPage,
          size: this.pageSize
        }).then(res => {
          this.listLoading = false;
          if (res.data.successFlg) {
            this.tableData = res.data.detailModelList;
            this.total = res.data.totalCount;
            this.totalAmount = res.data.obj.totalAmount || 0;
            this.chargeOffsTotalAmount = res.data.obj.chargeOffsTotalAmount || 0;
          } else {
            this.$message.error(res.data.errorMsg);
          }
        });
      } else if (this.activeName === 'second') {
        this.searchTruckLoadPrganizationProfitSummaryList();
        this.getTruckLoadOrganizationProfitSummarystatics();
      }
    },
    searchTruckLoadPrganizationProfitSummaryList () {
      this.truckLoadListLoading = true;
      getTruckLoadOrganizationProfitSummaryList({
        filters: this.$ue.objToFilter(this.truckLoadSearchFilters),
        sort: 'createdDate,desc',
        page: this.truckLoadCurrentPage - 1,
        size: this.truckLoadPageSize
      }).then((res) => {
        if (res.data) {
          this.truckLoadTableData = res.data;
          this.truckLoadTableTotal = Number(res.headers['x-total-count']);
          this.truckLoadListLoading = false;
        }
      });
    },
    getTruckLoadOrganizationProfitSummarystatics () {
      getTruckLoadOrganizationProfitSummarystatics({
        filters: this.$ue.objToFilter(this.truckLoadSearchFilters)
      }).then((res) => {
        if (res.data) {
          this.truckLoadTotalAmount = res.data.totalAmount;
          this.truckLoadChargeOffsTotalAmount = res.data.chargeOffsTotalAmount;
        }
      });
    },
    handlePageSizeChange (size) {
      this.pageSize = size;
      this.search();
    },
    handleCurrentPageChange (page) {
      this.currentPage = page;
      this.search();
    },
    handleTruckLoadPageSizeChange (size) {
      this.truckLoadPageSize = size;
      this.search();
    },
    handleTruckLoadCurrentPageChange (page) {
      this.truckLoadCurrentPage = page;
      this.search();
    }
  },
  computed: {
    btns () {
      return this.$store.state.btns[this.$route.path] || [];
    },
    querys () {
      return this.$store.state.querys[this.$route.path + '#default'] || [];
    }
  },
  mounted () {
    this.searchTruckLoadPrganizationProfitSummaryList();
    this.getTruckLoadOrganizationProfitSummarystatics();
    this.search();
    this.$store.commit('initDict');
  }
};
</script>
